<template>
  <div class="dog">
    <img src="url" alt="" />
    <p @click="like" :style="{ backgroundColor: color }">{{ name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: '',
    }
  },
  // 接收
  props: ['url', 'name', 'index'],
  methods: {
    like() {
      this.color = 'skyblue'
      this.$emit('maidog', this.index)
    },
  },
}
</script>

<style>
.dog {
  width: 300px;
  border: 1px solid black;
  text-align: center;
  float: left;
}
.dog img {
  width: 100%;
  height: 200px;
}
</style>
